<template>
  <div class="container h-lg">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="e in list" :title="e.title" :name="e.key">
        <div class="flex gap-4 flex-col justify-center">
          <el-card shadow="hover" v-for="item in e.children" :key="item.key">
            <a :href="item.url" target="_blank">{{ item.name }}</a>
          </el-card>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup>
const activeName = ref("");
const list = ref([
  {
    title: "OHT9300B 智能型4G远控球阀-配套工具及资料",
    key: "1",
    children: [
      { name: "OHT9300B-产品规格书", url: "https://www.baidu.com/", key: 1 },
      { name: "OHT9300B-产品规格书", url: "https://www.baidu.com/", key: 2 },
      { name: "OHT9300B-产品规格书", url: "https://www.baidu.com/", key: 3 },
      { name: "OHT9300B-产品规格书", url: "https://www.baidu.com/", key: 4 },
    ],
  },
  {
    title: "OHT9300B 智能型4G远控球阀-配套工具及资料2",
    key: "2",
    children: [
      { name: "OHT9300B-用户使用手册", url: "https://www.baidu.com/", key: 1 },
    ],
  },
  {
    title: "OHT9300B 智能型4G远控球阀-配套工具及资料3",
    key: "3",
    children: [
      { name: "OHT9300B-产品规格书", url: "https://www.baidu.com/", key: 1 },
    ],
  },
]);
</script>
<style scoped lang="scss"></style>
